{extend name="base"}
{block name="pageBody"}
<section class="content-wrapper">
  <div class="content-container container">
    <div class="heading-block">
      <h1>搜索结果</h1>
    </div>
    <div class="new-product-block">
      <ul class="product-grid">
        {volist name="commoditys" id="commodity" empty="暂时没有数据"}
        <li>
          <div class="pro-img">
            <img title="Freature Product" alt="Freature Product" src="{$commodity.picture_address}" />
          </div>
          <div class="pro-content">
            <p>{$commodity.commodity_name}</p>
          </div>
          <div class="pro-price">{$commodity.commodity_price}￥</div>
          <div class="pro-btn-block"> 
          <a class="add-cart left" onclick="getOrder('{$commodity.commodity_id}')">立即购买</a> 
          <a class="add-cart right" onclick="getCommodityInfo('{$commodity.commodity_id}')">查看详情</a> </div>
          <div class="pro-link-block"> <a class="add-wishlist left" title="Add to wishlist">{$commodity.gmt_create}</a>
            <div class="clearfix"></div>
          </div>
        </li>
        {/volist}
      </ul>
    </div>
    <div class="news-letter-container">
      <div class="free-shipping-block">
        <h1>ENJOY FREE SHIPPING</h1>
        <p>on all orders as our holiday gift for you!</p>
      </div>
      <div class="news-letter-block">
        <h2>SIGN UP FOR OUR NEWSLETTER</h2>
        <input type="text" value="Enter email address" title="" />
        <input type="submit" value="Submit" title="Submit" />
      </div>
    </div>
  </div>
</section>
<!-- 一个分类框 -->
{/block}

{block name="model"}
  <script>
    function getCommodityInfo(commodity_id){
      $.getJSON("{:url('commoditydo/getCommodityInfo')}",{commodity_id:commodity_id},function(data){
        var commodity = data.data;
        $("#CommodityInfo input[name='commodity_name']").val(commodity.commodity_name);
        $("#CommodityInfo input[name='commodity_price']").val(commodity.commodity_price);
        $("#CommodityInfo input[name='commodity_num']").val(commodity.commodity_num);
        $("#CommodityInfo input[name='commodity_type']").val(commodity.category_name);
        $("#CommodityInfo input[name='commodity_addr']").val(commodity.commodity_addr);
        getPics(commodity_id);
        $('#commodity_Info').modal('show');
      })
    }

    function getPics(commodity_id){
    $.getJSON("{:url('commoditydo/getCommodityPic')}",{commodity_id:commodity_id},function(data){
      $("#Pics").html("");
      if(0 == data.code){
        var pictures = data.data;
        for(var i=0;i<pictures.length;i++){
          $("#Pics").append("<li><img style='width:100px' src='"+pictures[i].picture_address+"'></li>");
        }
        $('#show_pic').modal('show');
      }else{
        alert("获取图片失败");
      }
    });
  }
  </script>
  <div id="commodity_Info" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3 id="myModalLabel">商品信息</h3>
    </div>
    <form id="CommodityInfo" class="form-horizontal" onsubmit="return false;">
      <br>
      <div class="control-group">
              <label class="control-label">商品名称</label>
              <div class="controls">
                <input type="text" name="commodity_name" readonly><br>
            </div>
          </div>
          <div class="control-group">
              <label class="control-label">商品价格</label>
              <div class="controls">
                <input type="number" name="commodity_price" min="0.00" step="0.01" readonly > 元<br>
            </div>
          </div>
      <div class="control-group">
              <label class="control-label">商品数量</label>
              <div class="controls">
                <input type="number" name="commodity_num" readonly ><br>
            </div>
          </div>
          <div class="control-group">
              <label class="control-label">商品类别</label>
              <div class="controls">
                <input type="text" name="commodity_type" readonly ><br>
            </div>
          </div>
      <div class="control-group">
              <label class="control-label">商品地址</label>
              <div class="controls">
                <input type="text" name="commodity_addr" readonly ><br>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label">商品图片</label>
              <div class="controls">
                   <ul id="Pics" >
              </ul>
            </div>
          </div>
    </form>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>

  <script>
    function getOrder(commodity_id){
      $.getJSON("{:url('commoditydo/getCommodityInfo')}",{commodity_id:commodity_id},function(data){
        var commodity = data.data;
        $("#add_order input[name='commodity_id']").val(commodity.commodity_id);
        $("#add_order input[name='commodity_name']").val(commodity.commodity_name);
        $("#add_order input[name='commodity_price']").val(commodity.commodity_price);
        $("#add_order input[name='commodity_num']").val(commodity.commodity_num);
        $("#add_order input[name='order_num']").attr("max",commodity.commodity_num);
        $("#add_order input[name='order_price']").attr("value",commodity.commodity_price);
        $('#add_order').modal('show');
      })
    }

    function getPrice(){
        var price = $("#add_order input[name='commodity_price']").val();
        var num = $("#add_order input[name='order_num']").val();
        $("#add_order input[name='order_price']").attr("value",price*num);
    }

    function addOrder(){
      var form = new FormData(document.getElementById("addOrder"));
      $.ajax({
          url:"{:url('commoditydo/addOrder')}",
          type:"post",
          data:form,
          processData: false,                // jQuery不要去处理发送的数据
          contentType: false,
          dataType: 'json',
                success:function(data){
                    if (0 == data.code) {
                      alert("提交成功");
                      location.reload();
                    }else{
                      location.href = "login";
                      alert(data.msg);
                    }
                }
            }); 
    }
  </script>
  <div id="add_order" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
      <h3 id="myModalLabel">订单信息</h3>
    </div>
    <form id="addOrder" class="form-horizontal" onsubmit="return false;">
      <br>
      <input type="hidden" name="commodity_id"><br>
      <div class="control-group">
          <label class="control-label">商品名称</label>
          <div class="controls">
            <input type="text" name="commodity_name" readonly><br>
        </div>
      </div>
      <div class="control-group">
          <label class="control-label">商品价格</label>
          <div class="controls">
            <input type="number" name="commodity_price" min="0.00" step="0.01" readonly > 元<br>
        </div>
      </div>
      <div class="control-group">
          <label class="control-label">商品数量</label>
          <div class="controls">
            <input type="text" name="commodity_num" readonly><br>
        </div>
      </div>
      <div class="control-group">
          <label class="control-label">购买数量</label>
          <div class="controls">
            <input type="number" onchange="getPrice()" name="order_num" value="1" min="1"><br>
        </div>
      </div>
      <div class="control-group">
          <label class="control-label">订单总价</label>
          <div class="controls">
            <input type="text" name="order_price" readonly><br>
        </div>
      </div>
    </form>
    <div class="modal-footer">
      <input class="btn" type="button" value="提交" onclick="addOrder();">
      <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
    </div>
  </div>
{/block}